import React from 'react'
import '../assets/style/login.css'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { UserOutlined ,LockOutlined} from '@ant-design/icons'
import {useNavigate, useLocation} from 'react-router-dom'
import LoginApi from '../apis/login'
export default function login() {
  const navigate = useNavigate()
  const location = useLocation()
  console.log(location.pathname,location.hash);
  const onFinish = (values) => {
    console.log('Success:', values);
    LoginApi.loginApi(`username=${values.username}&password=${values.password}`).then(res=>{
      console.log(res);
      message.success(res.data.message)
      localStorage.setItem('token',res.data.data.token)
      localStorage.setItem('userInfo',JSON.stringify(res.data.data.user))
     navigate('/layout/home')
    }).catch(res=>{
      message.error('登陆失败')
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='content'>
      <div style={{display:'flex',flexDirection:'column'}}>
      <div className='logo' style={{display:'flex',alignItems:'center',justifyContent:'center',height:'50px',marginBottom:'30px'}}>
        <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt=""  style={{width:'45px',height:'23px',marginRight:'15px'}}/>
        <h1 style={{height:'50px',lineHeight:'50px',margin:'0',fontSize:'33px',fontWeight:'bolder'}}>赤兔养车</h1>
      </div>
      <div className='form'>
        <h3 style={{textAlign:'center',color:'skyblue'}}>账户密码登录</h3>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}>
            <Input prefix={<UserOutlined />}  style={{width:'400px',height:'40px'}}/>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}>
            <Input.Password  prefix={<LockOutlined />}  style={{width:'400px',height:'40px'}}/>
          </Form.Item>
          <Form.Item
          >
            <Button type="primary" htmlType="submit" style={{width:'400px',height:'40px'}}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
      
      </div>
    </div>
  )
}
